 <template>
  <!-- 使用Nginx 作为静态资源服务器播放m3u8视频直播流 -->
  <div>
    <video
      id="my-video"
      width="800"
      height="400"
      class="video-js vjs-default-skin"
      controls
      preload="auto"
    >
      <source :src="videoObj.src" :type="videoObj.type" />
    </video>
  </div>
</template>
<script>
import videojs from "video.js/dist/video.min";
import "video.js/dist/video-js.min.css";
export default {
  metaInfo: {
    meta: [
      { charset: "utf-8" },
      {
        name: "referrer",
        content: "no-referrer"
        // content: "unsafe-url"
      }
    ]
  },
  data() {
    return {
      videoList: [
        {
          src: "http://localhost:11024/demo.m3u8",
          type: "application/x-mpegURL"
        },
        {
          src: "http://localhost:11024/demo.mp4",
          type: "video/mp4"
        },
        {
          src:
            "http://1252093142.vod2.myqcloud.com/4704461fvodcq1252093142/f865d8a05285890787810776469/playlist.f3.m3u8",
          type: "application/x-mpegURL"
        },
        {
          src:
            "http://vfx.mtime.cn/Video/2019/03/18/mp4/190318231014076505.mp4",
          type: "video/mp4"
        }
      ],
      videoObj: {} //播放器资源对象
    };
  },
  mounted() {
    // 必须先初始化播放路径后再初始化播放器
    this.videoObj = this.videoList[0];
    this.$nextTick(() => {
      videojs("my-video", {
        bigPlayButton: false,
        textTrackDisplay: false,
        posterImage: true,
        errorDisplay: false,
        controlBar: true,
        autoplay: true
      });
    });
  }
};
</script>

<style scoped>
</style>
